<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置指令</title>
<title>ngMessage</title>
<link rel="stylesheet" href="../lib/bootstrap3/css/dashboard.css">
<link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap-theme.css">
<link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
<script src="../lib/jquery/jquery-1.10.2.js"></script>
<script src="../lib/bootstrap3/js/bootstrap.min.js"></script>
<script src="../lib/angularjs/angular.min.js"></script>
<script src="../lib/angularjs/angular-messages.min.js"></script>
</head>
<body ng-app="directiveApp">
<div class="container-fluid">
    <div class="panel panel-default">
        <div class="panel-heading">ng-disable</div>
        <div class="panel-body">
            <input type="text" ng-model="someProperty" placeholder="TypetoEnable">
            <button class="btn btn-success" ng-model="button" ng-disabled="!someProperty">!someProperty</button>
            <button class="btn btn-success" ng-model="button" ng-disabled="someProperty">someProperty</button>
            <button class="btn btn-success" ng-model="button" ng-disabled="isDisabled">isDisabled</button>
            <div class="row">
                <div class="col-lg-12">
                    <b>(!someProperty)==true：</b>{{(!someProperty)==true}}<br/>
                    <b>someProperty==true：</b>{{someProperty==true}}<br/>
                    <b>isDisabled==true：</b>{{isDisabled==true}}
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">ng-readonly</div>
        <div class="panel-body">
            <input type="text" ng-model="readonly" >
            <input type="text"  ng-readonly="!readonly" placeholder="readonly">
            <div class="row">
                {{!readonly}}
            </div>
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel panel-heading">ng-checked</div>
        <div class="panel-body">
            <input type="checkbox" ng-check="ngcheck01" ng-model="ngcheck01" ng-init="ngcheck01=true">{{ngcheck01}}
            <input type="checkbox" ng-check="ngcheck02" ng-model="ngcheck02" ng-init="ngcheck02=false">{{ngcheck02}}
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">ng-selected</div>
        <div class="panel-body">
            <div class="form-group">
                <label class="col-lg-1">{{isTwoFish==true}}</label>
                <input type="checkbox" ng-model="isTwoFish">
                <select>
                    <option>One Fish</option>
                    <option ng-selected="isTwoFish">Two Fish</option>
                </select>
            </div>
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">ng-href</div>
        <div class="panel-body">
            <a ng-href="{{myHref}}">{{myHref}}</a>
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">ng-src</div>
        <div class="panel-body">
            <h1>WrongWay</h1>
            <img src="{{mysrc}}" style="width:200px;height:100px;"/>
            <h1>Rightway</h1>
            <img ng-src="{{mysrc}}" style="width:200px;height:100px;"/>
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">ng-click</div>
        <div class="panel-body">
            <h2 ng-click="ngClickFn()">点击：ngClickValue:{{ngClickValue}}</h2>
        </div>
    </div>
    <div class="panel panel-danger" ng-controller="controllerdemo1">
        <div class="panel-heading">ng-controller</div>
        <div class="panel-body">
            <h2 ng-click="ctrlfn()">someProperty:{{someMode.someProperty}}</h2>
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">someMode.someProperty</div>
        <div class="panel-body">
            <h2>someMode.someProperty：{{someMode.someProperty}}</h2>
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">ChildController</div>
        <div class="panel-body">
            <div class="well" ng-controller="parentController">
                <h3  ng-click="parentAction()">parentController:{{someMode.someProperty}}</h3>
                <div class="well-sm bg-danger" ng-controller="childController" ng-click="childAction()">
                    childController:{{someMode.someProperty}}
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">include</div>
        <div class="panel-body">
            <div ng-include="'myTemplateName.html'" ng-controller="MyTemplateController" ng-init="name = 'World'">
                Hello {{ name }}
            </div>
            <div ng-include="'myTemplateName.html'"></div>
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">ng-switch</div>
        <div class="panel-body">
            <input type="text" ng-model="person.name"/>
            <div ng-switch on="person.name">
                <p ng-switch-default>And the winner is</p>
                <h3 ng-switch-when="Ari">{{ person.name }}</h3>
            </div>
        </div>
        <div class="panel-footer">
            ng-switch、ng-switch-default、ng-switch-when
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">ng-view</div>
        <div class="panel-body">

        </div>
    </div>
</div>
</body>
<script>
    var app=angular.module("directiveApp",[]);
    app.run(function($rootScope, $timeout,$interval) {
        $rootScope.isDisabled = true;
        $timeout(function() {
            $rootScope.isDisabled = false;
        }, 2000);
        $rootScope.$watch('someProperty',function (newValue,oldValue) {
            $rootScope.isDisabled=newValue.length%2==0;
        });
        var myHrefs=["http://www.baidu.com","http://www.angularjs.cn/"];
        $rootScope.myHref=myHrefs[0];
        $interval(function () {
            $rootScope.myHref=myHrefs[Math.round(Math.random()*10)%2];
        },2000);
        var mysrcs=["http://photocdn.sohu.com/20170103/Img477616579.jpeg","http://photocdn.sohu.com/20170103/Img477616580.jpeg"];
        $rootScope.mysrc=mysrcs[0];
        $interval(function () {
            $rootScope.mysrc=mysrcs[Math.round(Math.random()*10)%2];
        },2000);

        $rootScope.ngClickFn=function () {
            $rootScope.ngClickValue=Math.random();
        }
    });

    app.controller('controllerdemo1',function ($scope) {
        $scope.someMode={
            someProperty:"点击：Hello Word"
        }
        $scope.ctrlfn=function () {
            $scope.someMode.someProperty="Hello Human "+Math.random();
        }
    });

    app.controller('parentController',function ($scope) {
        $scope.someMode={
            someProperty:"点击：Hello Word"
        }
        $scope.parentAction = function() {
            $scope.someMode.someProperty = 'hello human, from 【parent】'+Math.random();
        };
    });
    app.controller('childController',function ($scope) {
        $scope.childAction = function() {
            $scope.someMode.someProperty = 'hello human, from 【child】 '+Math.random();
        };
    });
    
    app.controller('MyTemplateController',function () {
        
    });
</script>
</html>
<script id="myTemplateName.html" type="text/ng-template">
    <h1> Hello </h1>
</script>